<template>
	<view class="page">
		<view class="page-head-bg-box">
			<image :src="getAssets('@/static/static-online/my/my-bg.png')" mode=""></image>
		</view>

		<view class="page-navbar">
			<u-navbar :fixed="false" :placeholder="true" title="我的佣金" :bgColor="headBackground" :autoBack="true"
				:titleStyle="{color:'#000000'}" :leftIconColor="'#000000'">
			</u-navbar>
		</view>

		<view class="data-panel">
			<view class="title">
				佣金余额
			</view>
			<view class="total">
				<text class="huobi">
					￥
				</text>
				<text class="money">
					{{allow_tixian_money || '0.00'}}
				</text>
			</view>
		</view>

		<view class="page-ctx">
			<view class="box-tixian">
				<view class="main-title">
					提现余额
				</view>
				<view class="input-box tixian-input-box flex-between">
					<view class="input-item">
						<u--input type="digit" v-model="tixian_money" placeholder="输入提现金额" border="none" clearable fontSize="24px"
							:customStyle="{height: '46px', padding: '0 12px'}"></u--input>
					</view>
					<view class="btn" @click="doFillAll()">
						全部提现
					</view>
				</view>
				<view class="choose-card flex-between" @click="show_pop = true">
					<view class="label">
						提现至
					</view>
					<view class="value flex">
						<text class="value-text" v-if="!card_select.id">
							请选择提现银行卡
						</text>
						<text class="value-text" v-else>
							{{card_select.bankName}} （{{card_select.cus_card_weihao}}）
						</text>

						<image src="@/static/common/arrow.png"></image>
					</view>
				</view>

				<view class="btn-box">
					<view class="btn flex-center" @click="doTixian()">
						立即提现
					</view>
				</view>
			</view>
		</view>

		<w_bottom_safe height="140" />



		<view class="pop-order-choose-pay">
			<u-popup ref="store_cart_pop" bgColor="#ffffff" :show="show_pop" mode="bottom" :closeOnClickOverlay="true"
				round="30" @close="onClose" @open="onOpen">
				<view class="info-modal-wrap">
					<view class="info-modal-inner">
						<view class="modal-head flex-center">
							选择提现银行卡
						</view>
						<view class="modal-ctx">
							<scroll-view scroll-y scroll-with-animation class="scroll-container">
								<view class="cart-wrap">
									<view class="card-list">
										<view class="card-item flex-between" v-for="(item,index) in card_list" :key="index"
											@click="doCardSelect(item)">
											<view class="card-info">
												{{item.bankName}} （{{item.cus_card_weihao}}）
											</view>
											<view class="card-select" v-if="card_select.id == item.id">
												<image src="@/static/common/radio1.png" mode=""></image>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<view class="modal-foot">
							<view class="footer-wrap ">
								<view class="btns flex-between">
									<view class="btn btn-confirm  flex-center" @click="toBindCard()">
										绑定新银行卡
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				headBackground: 'rgba(255,255,255,0)', //控制顶部标题栏颜色 默认透明颜色 transparent
				allow_tixian_money: 0,
				tixian_money: '',
				card_list: [],
				card_select: {},

				show_pop: false,
			}
		},
		onLoad() {

		},
		onShow() {
			this.setView();
		},

		methods: {
			setView() {
				this.query_tixian_money()
				this.query_card_list()
			},
			query_tixian_money() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'Commission_lists',
						type: 0,
					},
				}).then(res => {
					if (res.code == 200) {
							this.allow_tixian_money = res.data.commission
					}
				})
			},
			query_card_list() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'Commission_banks',
					},
				}).then(res => {
					if (res.code == 200) {
						let list = res.data || []
						list.forEach(v => {
							v.cus_card_weihao = v.bankCard.substr(-4)
						})
						this.card_list = list
					}
				})
			},

			doFillAll() {
				this.tixian_money = this.allow_tixian_money
			},

			doTixian() {
				// this.toSuccess()
				
				if (this.tixian_money <= 0 || this.tixian_money > this.allow_tixian_money) {
					this.$alert('请输入有效的提现金额')
					return
				}
				if (!this.card_select.id) {
					this.$alert('请选择提现银行卡')
					return
				}
				
				this.mix_throttle(this.doTixianFn)
			},

			doTixianFn() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'Commission_tixian',
						bankId: this.card_select.id,
						money: this.tixian_money,
						type: 0, //0提现到银行卡 1提现到零钱
					},
				}).then(res => {
					this.$alert(res)
					if (res.code == 200) {
						this.toSuccess();
						// this.toBack({
						// 	time: 1500
						// })
					}
				})
			},
			toSuccess() {
				this.toRoute({
					mode: 'redirectTo',
					path: '/withdrawal-success',
				})
			},
			
			toBindCard() {
				this.show_pop = false
				this.toRoute('bank-card-form')
			},

			//
			onOpen() {
				this.show_pop = true
			},
			onClose() {
				this.show_pop = false
			},
			doCardSelect(item) {
				this.card_select = item
				this.show_pop = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss">
	.tixian-input-box .input-item input {
		height: 112rpx;
	}

	.tixian-input-box .u-input__content {
		height: 112rpx;
	}

	.tixian-input-box .u-input__content__field-wrapper__field {
		height: 112rpx;
	}
</style>


<style lang="scss" scoped>
	::v-deep .u-popup__content {
		// border-radius: 32rpx 32rpx 32rpx 32rpx;
		background: transparent;
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 112rpx;
	}


	.page {}

	.page-head-bg-box {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 562rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}


	.page-navbar {
		position: relative;
		z-index: 2;
	}


	.data-panel {
		position: relative;
		z-index: 2;
		padding: 32rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.9);
		}

		.total {
			margin-top: 16rpx;

			.huobi {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.money {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 56rpx;
				color: rgba(0, 0, 0, 0.9);
			}
		}


	}





	.page-ctx {
		position: relative;
		z-index: 2;
		padding: 24rpx 32rpx;
	}

	.box-tixian {
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.main-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #000000;
		}

		.input-box {
			margin-top: 50rpx;
			margin-bottom: 38rpx;
			border-bottom: 2rpx solid #E4F2EB;

			.input-item {
				flex: 1;
				overflow: hidden;
				margin-right: 60rpx;

				.input {
					height: 80rpx;
					line-height: 80rpx;
					flex: 1;
					overflow: hidden;
					font-size: 40rpx;
					color: #000000;
					padding: 16rpx 20rpx;
				}

				.input-p {
					color: #999999;
				}
			}



			.btn {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
		}

		.choose-card {
			padding: 20rpx 0;

			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}

			.value {

				.value-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}

				image {
					margin-left: 20rpx;
					width: 12rpx;
					height: 20rpx;
				}
			}
		}

		.btn-box {
			margin-top: 40rpx;

			.btn {
				height: 80rpx;
				background: #CB0011;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}





	// 弹窗

	.info-modal-wrap {
		width: 574rpx;
		width: 660rpx;
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 0;
		// padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

		.info-modal-inner {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 0 0;
			padding-bottom: 0;
			min-height: 400rpx;
			background: #FFFFFF;
			background: #F8F8F8;


			.modal-head {
				padding: 24rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.modal-ctx {
				width: 100%;
				background-color: #fff;
				background: #F8F8F8;
				padding: 0 20rpx;
				min-height: 200rpx;
				padding-bottom: 30rpx;

				.scroll-container {
					max-height: calc(100vh - 600rpx);
					min-height: 300rpx;
					background: #FFF;

					.card-item {
						min-height: 90rpx;
						line-height: 90rpx;
						padding: 0 20rpx;
						border-bottom: 2rpx solid #F3F4F8;

						.card-info {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}

						.card-select {
							width: 30rpx;
							height: 30rpx;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}
				}
			}


			.modal-foot {
				padding: 20rpx;

				.safe-fixed-bottom {
					position: relative;
				}

				.btns {
					.btn {
						flex: 1;
						width: 100%;
						height: 80rpx;

						border-radius: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;

						&.btn-cancel {
							background: #ddd;
							color: #666;
						}

						&.btn-confirm {
							background: #CB0011;
						}


						&+.btn {
							margin-left: 24rpx;
						}
					}
				}
			}

		}
	}
</style>